body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f6f7f9;
    color: #1d3559;
    margin: 0;
    padding: 0;
  }

  header {
    background: #1d3559;
    color: #fff;
    text-align: center;
    padding: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  /* ---- Navigation unten (nur Logout bleibt) ---- */
  nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #767676;
    display: flex;
    justify-content: center; /* nur Logout mittig */
    padding: 10px 0;
  }
  nav button {
    background: none;
    border: none;
    color: #1d3559;
    font-size: 16px;
    font-weight: 500;
  }

  section {
    padding: 16px;
    margin-bottom: 60px;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
  }

  input {
    padding: 12px;
    font-size: 16px;
    border: 1px solid #767676;
    border-radius: 8px;
    color: #1d3559;
    background: #fff;
  }

  button {
    padding: 12px;
    background: #1d3559;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  button:hover {
    background: #2b4879;
  }

  .mini-btn {
    background: #1d3559;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    margin: 2px;
    font-size: 13px;
    cursor: pointer;
  }
  .mini-btn:hover {
    background: #2b4879;
  }
  .mini-btn:active {
    background: #14233d;
  }

  #messageBox {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #1d3559;
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    display: none;
    z-index: 1000;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  }
  #messageBox.error {
    background: #a61d1c;
  }
  #messageBox.success {
    background: #4fa13f;
  }

  .hidden {
    display: none;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li.list-item {
    padding: 12px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.1s;
  }
  li.list-item:active {
    transform: scale(0.97);
    background: #e9ecf4;
  }

  #surveyDetails table {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 10px;
    overflow: hidden;
  }
  #surveyDetails th {
    background: #f2f4f7;
    font-weight: 500;
    color: #1d3559;
  }
  #surveyDetails td {
    color: #1d3559;
  }

  /* Tabellenzeilen */
  tr:nth-child(even) {
    background: #f8f8f8;
  }
  tr:hover {
    background: #e8edf5;
  }
  td {
    transition: color 0.3s ease;
  }
  #navTitle + span,
span#backArrow {
  transition: color 0.2s ease;
}
span#backArrow:hover {
  color: #a61d1c;
}
/* --- Responsive Layout für Befragungsübersicht (mobile) --- */
@media (max-width: 600px) {
  .survey-table,
  .survey-table thead,
  .survey-table tbody,
  .survey-table th,
  .survey-table td,
  .survey-table tr {
    display: block;
  }

  /* Kopfzeile (Spaltenüberschriften) ausblenden */
  .survey-table thead {
    display: none !important;
  }

  .survey-table tr {
    margin-bottom: 12px;
    border: 1px solid #767676;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 8px;
  }

  .survey-table td {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    font-size: 14px;
  }

  .survey-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #767676;
    flex: 1;
  }

  .survey-table .mini-btn {
    padding: 6px 10px;
    font-size: 13px;
  }
}
/* --- Mobile Layout: Beschriftungen für bestimmte Spalten ausblenden --- */
@media (max-width: 600px) {
  .survey-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #767676;
    flex: 1;
  }

  /* Nur Befragung & Aktionen ohne Label */
  .survey-table td[data-label="Befragung"]::before,
  .survey-table td[data-label="Aktionen"]::before {
    content: "";
  }
}
/* === Modernes Kachel-Design für mobile Befragungsübersicht === */
@media (max-width: 600px) {

  .survey-table tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    background: #fff;
    margin-bottom: 14px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }

  .survey-table tr:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  }

  /* Befragungsname hervorheben */
  .survey-table td[data-label="Befragung"] {
    font-size: 17px;
    font-weight: 600;
    color: #1d3559;
    margin-bottom: 8px;
  }

  /* Zahlenzeilen */
  .survey-table td[data-label="Completes (Soll)"],
  .survey-table td[data-label="Screenouts"],
  .survey-table td[data-label="Quota full"] {
    font-size: 14px;
    color: #1d3559;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 2px 0;
  }

  /* Buttons in Reihe unten */
  .survey-table td[data-label="Aktionen"] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eee;
  }

  /* Buttons */
  .survey-table .mini-btn {
    background: #1d3559;
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .survey-table .mini-btn:hover {
    background: #2b4879;
  }
}
/* === Farbliche Markierungen für Live/Test Projekte (mobil & Desktop) === */
.survey-live {
  border-left: 5px solid #1d3559 !important;
}

.survey-test {
  border-left: 5px solid #a5a5a5 !important;
}

.survey-other {
  border-left: 5px solid #e0e0e0 !important;
}

/* Extra Akzent für mobile Kacheln */
@media (max-width: 600px) {
  .survey-live {
    box-shadow: 0 2px 6px rgba(29,53,89,0.25);
  }
  .survey-test {
    box-shadow: 0 2px 6px rgba(118,118,118,0.25);
  }
}
/* === Desktop-Layout Optimierung (zentriert, mit vollem Header) === */
@media (min-width: 601px) {

  /* Seite mit zentriertem Inhaltsbereich */
  body {
    background: #f6f7f9;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  header {
    position: sticky;
    top: 0;
    width: 100%;
    background: #1d3559;
    color: #fff;
    text-align: center;
    padding: 16px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* zentrierter Inhaltsbereich */
  section {
    width: 100%;
    max-width: 960px;
    background: #fff;
    margin-top: 20px;
    margin-bottom: 60px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 20px 30px;
  }

  /* Breadcrumb über dem Inhalt, zentriert */
  #navTitle {
    width: 100%;
    max-width: 960px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    margin: 18px auto 8px auto;
    color: #1d3559;
  }

  #navTitle span {
    cursor: pointer;
  }

  #navTitle span:not(:last-child)::after {
    content: " › ";
    color: #767676;
  }

  #navTitle span:hover {
    text-decoration: underline;
    color: #a61d1c;
  }

  /* Tabellenlayout */
  .survey-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
  }

  .survey-table thead tr {
    background: #f2f4f7;
  }

  .survey-table th {
    color: #1d3559;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
  }

  .survey-table tbody tr {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.05s ease;
  }

  .survey-table tbody tr:hover {
    transform: scale(1.01);
    background: #f8fafc;
  }

  .survey-table td {
    padding: 10px 12px;
    border-top: 1px solid #eee;
    vertical-align: middle;
  }

  .survey-table td:first-child {
    font-weight: 600;
    color: #1d3559;
  }

  /* Buttons harmonisch platzieren */
  .mini-btn {
    background: #1d3559;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 2px;
    font-size: 14px;
    transition: background 0.2s ease;
  }

  .mini-btn:hover {
    background: #2b4879;
  }

  .mini-btn:active {
    background: #14233d;
  }
}
/* === Desktop-Layout mit CI-Farben & optischem Breadcrumb-Streifen === */
@media (min-width: 601px) {

  body {
    background: #f6f7f9;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  header {
    position: sticky;
    top: 0;
    width: 100%;
    background: #1d3559; /* RIECKE-Blau */
    color: #fff;
    text-align: center;
    padding: 16px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-bottom: 4px solid #a61d1c; /* feine rote Linie unter Header */
  }

  /* Breadcrumb-Bereich: hellgrauer Streifen mit rotem Akzent links */
  #navTitle {
    width: 100%;
    max-width: 960px;
    background: #f2f3f5;
    
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    margin: 20px auto 8px auto;
    padding: 8px 0;
    color: #1d3559;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  #navTitle span {
    cursor: pointer;
    transition: color 0.2s ease;
  }

  #navTitle span:not(:last-child)::after {
    content: " › ";
    color: #767676;
  }

  #navTitle span:hover {
    text-decoration: underline;
    color: #a61d1c;
  }

  section {
    width: 100%;
    max-width: 960px;
    background: #fff;
    margin-top: 10px;
    margin-bottom: 60px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 20px 30px;
  }

  /* Tabellenlayout */
  .survey-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
  }

  .survey-table thead tr {
    background: #f2f4f7;
  }

  .survey-table th {
    color: #1d3559;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
  }

  .survey-table tbody tr {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.05s ease, box-shadow 0.1s ease;
  }

  .survey-table tbody tr:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 6px rgba(166, 29, 28, 0.15); /* leicht rötlicher Hover-Schatten */
    background: #fff7f6; /* minimaler Rot-Ton */
  }

  .survey-table td {
    padding: 10px 12px;
    border-top: 1px solid #eee;
    vertical-align: middle;
  }

  .survey-table td:first-child {
    font-weight: 600;
    color: #1d3559;
  }

  /* Buttons – abgestimmt auf CI-Farben */
  .mini-btn {
    background: #1d3559;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 2px;
    font-size: 14px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }

  .mini-btn:hover {
    background: #a61d1c; /* Rot beim Hover */
  }

  .mini-btn:active {
    background: #861514;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }

  /* Tabellenzahlen für Statusfarben (Komplett erfüllt, Warnung etc.) */
  .survey-table td[data-status="ok"] {
    color: #1d7a34; /* Grün */
  }
  .survey-table td[data-status="warn"] {
    color: #e67e22; /* Orange */
  }
  .survey-table td[data-status="over"] {
    color: #a61d1c; /* CI-Rot für Überfüllung */
    font-weight: 600;
  }
}